<template>
    <div class="home">
        <el-container>
            <el-header style="height:100px">
                <div class="header-left">
                    <img src="@/assets/logo.jpg" alt="">
                    <h1>电商后台管理系统</h1>
                </div>
                <div class="header-right">
                    <el-button type="text" @click="outLogin">退出登录</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside :width="isCollapse?'60px':'200px'">
                    <div style="height:30px;background-color: white;text-align: center;" @click="isCollapse = !isCollapse"><i style="font-size:20px;line-height:30px" class="el-icon-more"></i></div>
                    <el-menu router  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" :collapse-transition="false" :unique-opened="true">
                        <el-submenu :index="item.order + ''" v-for="(item,index) in menuList" :key="item.id">
                            <template slot="title">
                                <i :class="iconList[index]"></i>
                                <span v-if="menuList.length != 0">{{ item.authName }}</span>
                            </template>
                            <el-menu-item-group v-if="menuList.length != 0">
                                <el-menu-item :index="'/'+item2.path" v-for="item2 in item.children" :key="item2.id">{{ item2.authName }}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {GetMenuData} from '@/api/home.js';
    export default {
        data(){
            return{
                menuList:[],
                iconList:[
                    "iconfont icon-yonghuguanli",
                    "iconfont icon-quanxianguanli",
                    "iconfont icon-shangpinguanli",
                    "iconfont icon-dingdanguanli",
                    "iconfont icon-shujutongji"
                ],
                isCollapse:false
            }
        },
        mounted(){
            this.getMenuData();
        },
        methods:{
            async getMenuData(){
                const result = await GetMenuData({
                    method:'get',
                    url:'menus'
                })
                console.log(result);
                this.menuList = result.data;
                console.log(this.menuList);
            },
            outLogin(){
                window.sessionStorage.removeItem('token');
                this.$router.push('/login');
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="scss" scoped>
.home{
    width:100%;
    height:100%;
    .el-container{
        width:100%;
        height:100%;
        .el-header{
            background-color: #FB3A4D;
            color: white;
            text-align: center;
            line-height: 100px;
            display:flex;
            justify-content: space-between;
            align-items: center;
            .header-left{
                display:flex;
                align-items:center;
                img{
                    width:60px;
                    height:60px;
                }
                h1{
                    font-size:25px;
                    margin-left:10px;
                }
            }
            .header-right{
                .el-button--text{
                    color:white;
                }
            }
        }
        .el-aside {
            background-color: #F5F5F5;
            color: #333;
            text-align: center;
            .el-menu{
                background-color: #F5F5F5;
                .el-submenu{
                    .el-submenu__title{
                        padding:0;
                    }
                }
            }
        }
        .el-main {
            background-color: #ffffff;
            color: #333;
            text-align: center;
            div{
                width:100%;
                height:100%;
            }
        }
    }
}
</style>